<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <jsp:include page="/common/backend_common.jsp"/>
    <link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
    <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <script src="https://cdn.bootcss.com/moment.js/2.18.1/moment-with-locales.min.js"></script>
    <link href="https://cdn.bootcss.com/bootstrap-datetimepicker/4.17.47/css/bootstrap-datetimepicker.min.css"
          rel="stylesheet"/>
    <script src="https://cdn.bootcss.com/bootstrap-datetimepicker/4.17.47/js/bootstrap-datetimepicker.min.js"></script>
    <script type="text/javascript" src="/assets/js/FileSaver.min.js"></script>
    <script type="text/javascript" src="/assets/js/tableExport.js"></script>
    <style type="text/css">
        .btn:focus,
        .btn:active:focus,
        .btn.active:focus,
        .btn.focus,
        .btn:active.focus,
        .btn.active.focus {
            outline: none;
        }
    </style>
</head>
<body class="no-skin"  style="background: white">
<input id="gritter-light" checked="" type="checkbox" class="ace ace-switch ace-switch-5"/>

<div class="page-header" style="margin-top: 0px">
    <h1>
        进货统计与分析
        <small>
            <i class="ace-icon fa fa-angle-double-right"></i>
            查询与统计进货(生产厂家)信息汇总
        </small>
    </h1>
</div>
<div class="main-content-inner">
    <div class="col-sm-12">
        <div class="col-xs-12">
            <div class="table-header">
                操作列表
            </div>
            <div>
                <div id="dynamic-table_wrapper" class="dataTables_wrapper form-inline no-footer">
                    <div class="row">
                        <div class="row" style="margin-right: 0px;padding-right: 0px;">
                            <div class="col-xs-12">
                                <div class="dataTables_length" id="dynamic-table_length">
                                    <label>
                                        展示
                                        <select id="pageSize" name="dynamic-table_length" aria-controls="dynamic-table"
                                                class="form-control input-sm">
                                            <option value="10">10</option>
                                            <option value="25">25</option>
                                            <option value="50">50</option>
                                            <option value="100">100</option>
                                        </select> 条记录 </label>

                                    &nbsp;&nbsp;&nbsp;&nbsp;
                                    生产厂家：<input id="search-ProvideUnit" type="search" name="ProvideUnit" class="form-control input-sm"
                                            aria-controls="dynamic-table">
                                    &nbsp;&nbsp; &nbsp;&nbsp;
                                    时间：
                                    <div class='input-group date' id='datetimepicker1' style="width: 150px;">
                                        <input id="search-from" name="fromTime" class="form-control input-sm"
                                               placeholder="开始时间" aria-controls="dynamic-table"/>
                                        <span class="input-group-addon"><span
                                                class="glyphicon glyphicon-calendar"></span></span>
                                    </div>
                                    ~
                                    <div class='input-group date' id='datetimepicker2' style="width: 150px;">
                                        <input id="search-to" name="toTime" class="form-control input-sm"
                                               placeholder="结束时间" aria-controls="dynamic-table"/>
                                        <span class="input-group-addon"><span
                                                class="glyphicon glyphicon-calendar"></span></span>
                                    </div>
                                    &nbsp;&nbsp; &nbsp;&nbsp;
                                    <button class="btn btn-info  fa fa-check research" type="button">
                                        查询&nbsp;
                                    </button>
                                </div>

                            </div>
                        </div>
                        <div class="row pre-scrollable">
                        <table id="dynamic-table"
                               class="table table-striped table-bordered table-hover dataTable no-footer" role="grid"
                               aria-describedby="dynamic-table_info"
                               style="font-size:13px;table-layout: fixed;word-break: break-all;">
                            <thead style="text-align: center;">
                            <tr role="row" style="text-align: center;">
                                <th tabindex="0" aria-controls="dynamic-table" rowspan="1" colspan="1"
                                     style="text-align: center">
                                    生产单位
                                </th>
                                <th tabindex="0" aria-controls="dynamic-table" rowspan="1" colspan="1"
                                     style="text-align: center">
                                    货物名称
                                </th>
                                <th tabindex="0" aria-controls="dynamic-table" rowspan="1" colspan="1"
                                     style="text-align: center">
                                    货物规格
                                </th>
                                <th tabindex="0" aria-controls="dynamic-table" rowspan="1" colspan="1"
                                    style="text-align: center">
                                    客户量
                                </th>
                                <th tabindex="0" aria-controls="dynamic-table" rowspan="1" colspan="1"
                                    style="text-align: center">
                                    总重量
                                </th>
                            </tr>
                            </thead>
                            <tbody id="ProvideUnits"></tbody>
                        </table>
                        </div>
                        <div class="row" id="ProvideUnitPage">
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<script id="ProvideUnitsTemplate" type="x-tmpl-mustache">
{{#ProvideUnits}}
<tr role="row" class="config odd" data-id="{{id}}"><!--even -->

     <td style="text-align:center; vertical-align:middle">{{provideunit}}</td>
     <td style="text-align:center; vertical-align:middle">{{goodsname}}</td>
     <td style="text-align:center; vertical-align:middle">{{goodsspec}}</td>
     <td style="text-align:center; vertical-align:middle">{{customerNum}}</td>
     <td style="text-align:center; vertical-align:middle">{{w}}</td>
</tr>
{{/ProvideUnits}}

</script>

<script id="paginateTemplate" type="x-tmpl-mustache">
<div class="col-xs-6">
    <div class="dataTables_info" id="dynamic-table_info" role="status" aria-live="polite">
        总共 {{total}} 中的 {{from}} ~ {{to}}
    </div>
</div>

<div class="col-xs-6">
    <div class="dataTables_paginate paging_simple_numbers" id="dynamic-table_paginate">
        <ul class="pagination">
            <li class="paginate_button previous {{^firstUrl}}disabled{{/firstUrl}}" aria-controls="dynamic-table" tabindex="0">
                <a href="#" data-target="1" data-url="{{firstUrl}}" class="page-action">首页</a>
            </li>
            <li class="paginate_button {{^beforeUrl}}disabled{{/beforeUrl}}" aria-controls="dynamic-table" tabindex="0">
                <a href="#" data-target="{{beforePageNo}}" data-url="{{beforeUrl}}" class="page-action">前一页</a>
            </li>
            <li class="paginate_button active" aria-controls="dynamic-table" tabindex="0">
                <a href="#" data-id="{{pageNo}}" >第{{pageNo}}页</a>
                <input type="hidden" class="pageNo" value="{{pageNo}}" />
            </li>
            <li class="paginate_button {{^nextUrl}}disabled{{/nextUrl}}" aria-controls="dynamic-table" tabindex="0">
                <a href="#" data-target="{{nextPageNo}}" data-url="{{nextUrl}}" class="page-action">后一页</a>
            </li>
            <li class="paginate_button next {{^lastUrl}}disabled{{/lastUrl}}" aria-controls="dynamic-table" tabindex="0">
                <a href="#" data-target="{{maxPageNo}}" data-url="{{lastUrl}}" class="page-action">尾页</a>
            </li>
        </ul>
    </div>
</div>

</script>

<script type="text/javascript">

        $(function () {
            var ProvideUnitsTemplate = $('#ProvideUnitsTemplate').html();
            Mustache.parse(ProvideUnitsTemplate);
            var ProvideUnitMap = {};

            loadProvideUnits();

            $(".research").click(function (e) {
                e.preventDefault();
                $("#ProvideUnitPage .pageNo").val('1');
                loadProvideUnits();
            });


            function loadProvideUnits() {
                var pageSize = $("#pageSize").val();
                var pageNo = $("#ProvideUnitPage .pageNo").val() || 1;
                var ProvideUnit = $("#search-ProvideUnit").val().replace(/\s+/g, "");
                var url = "/sys/WeighCount/ProvideUnit.json";
                var fromTime = $("#search-from").val();
                var toTime = $("#search-to").val();
                $.ajax({
                    url: url,
                    data: {
                        pageNo: pageNo,
                        pageSize: pageSize,
                        specialParam: ProvideUnit,
                        fromTime: fromTime,
                        toTime: toTime,
                    },
                    type: 'post',
                    success: function (result) {
                        renderProvideUnitsAndPage(result, url);
                    }
                });
            }


            function renderProvideUnitsAndPage(result, url) {
                if (result.ret) {
                    if (result.data.total > 0) {
                        var rendered = Mustache.render(ProvideUnitsTemplate, {
                            "ProvideUnits": result.data.data,
                        });
                        $('#ProvideUnits').html(rendered);
                    } else {
                        $('#ProvideUnits').html('');
                    }
                    var pageSize = $("#pageSize").val();
                    var pageNo = $("#ProvideUnitPage .pageNo").val() || 1;
                    renderPage(url, result.data.total, pageNo, pageSize, result.data.total > 0 ? result.data.data.length : 0, "ProvideUnitPage", renderProvideUnitsAndPage);
                } else {
                    showMessage("获取操作列表", result.msg, false);
                }
            }


            var paginateTemplate = $("#paginateTemplate").html();
            Mustache.parse(paginateTemplate);

            function renderPage(url, total, pageNo, pageSize, currentSize, idElement, callback) {
                var maxPageNo = Math.ceil(total / pageSize);
                console.log("maxPageNo"+maxPageNo);
                var paramStartChar = url.indexOf("?") > 0 ? "&" : "?";
                var from = (pageNo - 1) * pageSize + 1;
                console.log("from"+from+"pageNo"+pageNo);
                var view = {
                    from: from > total ? total : from,
                    to: (from + currentSize - 1) > total ? total : (from + currentSize - 1),
                    total: total,
                    pageNo: Number(pageNo),
                    maxPageNo: maxPageNo,
                    nextPageNo: Number(pageNo) >= maxPageNo ? maxPageNo : (Number(pageNo) + 1),
                    beforePageNo: pageNo == 1 ? 1 : (pageNo - 1),
                    firstUrl: (pageNo == 1) ? '' : (url + paramStartChar + "pageNo=1&pageSize=" + pageSize),
                    beforeUrl: (pageNo == 1) ? '' : (url + paramStartChar + "pageNo=" + (Number(pageNo) - 1) + "&pageSize=" + pageSize),
                    nextUrl: (pageNo >= maxPageNo) ? '' : (url + paramStartChar + "pageNo=" + (Number(pageNo) + 1) + "&pageSize=" + pageSize),
                    lastUrl: (pageNo >= maxPageNo) ? '' : (url + paramStartChar + "pageNo=" + maxPageNo + "&pageSize=" + pageSize)
                };
                $("#" + idElement).html(Mustache.render(paginateTemplate, view));

                $(".page-action").click(function (e) {
                    e.preventDefault();
                    $("#" + idElement + " .pageNo").val($(this).attr("data-target"));
                    var targetUrl = $(this).attr("data-url");
                    var ProvideUnit = $("#search-ProvideUnit").val().replace(/\s+/g, "");
                    if (targetUrl != '') {
                        $.ajax({
                            url: targetUrl,
                            data: {
                                specialParam: ProvideUnit,
                                fromTime: fromTime,
                                toTime: toTime,
                            },
                            type: 'post',
                            success: function (result) {
                                if (callback) {
                                    callback(result, url);
                                }
                            }
                        })
                    }
                })
            }

            $(function () {
                $('#datetimepicker1').datetimepicker({
                    format: 'YYYY-MM-DD',
                    locale: moment.locale('zh-cn')
                });
                $('#datetimepicker2').datetimepicker({
                    format: 'YYYY-MM-DD',
                    locale: moment.locale('zh-cn')
                });
                var date = new Date();
                var year = date.getFullYear();
                var month = date.getMonth() + 1;
                var strDateT = date.getDate();
                var strDateF = date.getDate();
                if (month >= 1 && month <= 9) {
                    month = "0" + month;
                }
                if (strDateT >= 0 && strDateT <= 9) {
                    strDateT = "0" + strDateT;
                }
                if (strDateF >= 0 && strDateF <= 9) {
                    strDateF = "0" + strDateF;
                }

                //给输入框赋初值
                $('#search-from').val(year+'-'+month+'-'+strDateF);
                $('#search-to').val(year+'-'+month+'-'+strDateT);
            });



            Date.prototype.Format = function (fmt) { //author: meizz
                var o = {
                    "M+": this.getMonth() + 1, //月份
                    "d+": this.getDate(), //日
                    "h+": this.getHours(), //小时
                    "m+": this.getMinutes(), //分
                    "s+": this.getSeconds(), //秒
                    "q+": Math.floor((this.getMonth() + 3) / 3), //季度
                    "S": this.getMilliseconds() //毫秒
                };
                if (/(y+)/.test(fmt)) fmt = fmt.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length));
                for (var k in o)
                    if (new RegExp("(" + k + ")").test(fmt)) fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
                return fmt;
            };
            var formatJson = function (json, options) {
                if (json == '') return '';
                var reg = null,
                    formatted = '',
                    pad = 0,
                    PADDING = '    '; // one can also use '\t' or a different number of spaces

                // optional settings
                options = options || {};
                // remove newline where '{' or '[' follows ':'
                options.newlineAfterColonIfBeforeBraceOrBracket = (options.newlineAfterColonIfBeforeBraceOrBracket === true) ? true : false;
                // use a space after a colon
                options.spaceAfterColon = (options.spaceAfterColon === false) ? false : true;

                // begin formatting...
                if (typeof json !== 'string') {
                    // make sure we start with the JSON as a string
                    json = JSON.stringify(json);
                } else {
                    // is already a string, so parse and re-stringify in order to remove extra whitespace
                    json = JSON.parse(json);
                    json = JSON.stringify(json);
                }

                // add newline before and after curly braces
                reg = /([\{\}])/g;
                json = json.replace(reg, '\r\n$1\r\n');

                // add newline before and after square brackets
                reg = /([\[\]])/g;
                json = json.replace(reg, '\r\n$1\r\n');

                // add newline after comma
                reg = /(\,)/g;
                json = json.replace(reg, '$1\r\n');

                // remove multiple newlines
                reg = /(\r\n\r\n)/g;
                json = json.replace(reg, '\r\n');

                // remove newlines before commas
                reg = /\r\n\,/g;
                json = json.replace(reg, ',');

                // optional formatting...
                if (!options.newlineAfterColonIfBeforeBraceOrBracket) {
                    reg = /\:\r\n\{/g;
                    json = json.replace(reg, ':{');
                    reg = /\:\r\n\[/g;
                    json = json.replace(reg, ':[');
                }
                if (options.spaceAfterColon) {
                    reg = /\:/g;
                    json = json.replace(reg, ': ');
                }

                $.each(json.split('\r\n'), function (index, node) {
                    var i = 0,
                        indent = 0,
                        padding = '';

                    if (node.match(/\{$/) || node.match(/\[$/)) {
                        indent = 1;
                    } else if (node.match(/\}/) || node.match(/\]/)) {
                        if (pad !== 0) {
                            pad -= 1;
                        }
                    } else {
                        indent = 0;
                    }

                    for (i = 0; i < pad; i++) {
                        padding += PADDING;
                    }

                    formatted += padding + node + '\r\n';
                    pad += indent;
                });
                return formatted;
            };

        });
    </script>
</body>
</html>